xinkeaboard/xinkeaboard-web/pages/store/[id].vue

<template>
  <div class="index">
    <StoreHeaderCat  ref="headercat" @updateFllow="updateFllow"/>
    <template v-if="firstLoading && !shutDown && !decorating && !stopBusiness">
      <div class="skeleton_banner"></div>
      <div class="w_sld_react_1210 adv_04_wrap skeleton">
        <div class="floor_title">
          <h2>
            <font>&nbsp;</font>
            <span></span>
            <font>&nbsp;</font>
          </h2>
        </div>
        <div class="floor_goods">
          <div
            class="item"
            v-for="(item_main, index_main) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            v-bind:key="index_main"
          >
            <div class="wrap">
              <a href="javascript:void(0)" class="example_text"> </a>
              <p class="title">
                <a href="javascript:void(0)">{{ item_main }}</a>
              </p>
              <p class="price"><span></span></p>
            </div>
          </div>
        </div>
      </div>
    </template>
    <SldDiy
      v-if="!firstLoading && decorateData.data.length"
      :decorateData="decorateData"
      @adv19="handleAdv19"
    />
    <!--单独加的荣誉资质-->
    <div class="adv_04_wrap honors_wrap self_background" v-show="honors.data.length > 0">
        <div class="floor_title">
        <h2>
          <!-- <font> </font> -->
          <span>{{L['荣誉展示']}}</span>
          <!-- <font> </font> -->
        </h2>
      </div>
      <div class="floor_goods">
        <SliderStore :itemData="honors.data" :itemIndex="0"/>
      </div>
    </div>
    <!-- 空页面 start-->
    <SldCommonEmpty
      v-if="decorating"
      totalHeight="700"
      paddingTop="200"
      :tip="L['我们正在努力装修中，敬请期待～']"
    />

    <SldCommonEmpty
      v-if="stopBusiness"
      totalHeight="700"
      paddingTop="200"
      :tip="L['店铺暂停经营']"
    />
    <!-- 空页面 end-->

    <SldCommonEmpty
      v-if="shutDown"
      totalHeight="700"
      paddingTop="200"
      :tip="L['店铺不存在或已关闭']"
    />
  </div>
</template>

<script setup>
import { getCurLanguage } from '@/composables/common.js';
const L = getCurLanguage();
const route = useRoute();
const firstLoading = ref(true); //是否第一次加载
const router = useRouter();
const vid = calcProductId(route.path);
const decorateData = reactive({ data: [] }); //装修数据
const shutDown = ref(false);
const decorating = ref(false); //是否装修中
const stopBusiness = ref(false); //是否停业
const honors = reactive({data:[]})
console.log('vid',vid)
const getStoreInfoBaseInfo = async () => {
  const {data:value,pending:pending} = await useFetchRaw(apiUrl + 'v3/seller/front/store/detail',{params:{storeId:vid}})
  const res = value._rawValue
  if(res.state == 200){
    honors.data = res.data.storeCertificateList
    useHead({
      title: res.data.seoInfo.seoTitle,
      meta: [
        {
          name: "description",
          content: res.data.seoInfo.seoDesc,
        },
        {
          name: "keywords",
          content: res.data.seoInfo.seoKeywords,
        },
      ],
    });
    getInitData();
  }
  else if (res.state == 257) {
    shutDown.value = true;
    firstLoading.value = false;
  } else if (res.state == 270) {
    decorating.value = true;
  } else if (res.state == 271) {
    stopBusiness.value = true;
  } else {
    ElMessage.error(res.msg);
  }

};
getStoreInfoBaseInfo()

const getInitData = async () => {
  let param = {
    storeId: vid,
  };
  if (route.query.type == "view" && route.query.decoId){
    param.decoId = route.query.decoId;
  }

  const {data:value,pending:pending} = await useFetchRaw(apiUrl + 'v3/system/front/pcDeco/sellerIndex',{params:param})
  const res = value._rawValue
  if(!pending._rawValue){
    firstLoading.value = false;
  }
  if (res.state == 200) {
      if (res.data) {
        if(res.data.data){
            decorateData.data = JSON.parse(res.data.data.replace(/&quot;/g, '"'));
            decorateData.data.map((item) => {
            item.json_data = item.json;
            if (item.json_data.type == "adv_19") {
                item.json_data.data.map((child) => {
                child.cur_tab = 0;
                });
            }
            if (item.json_data && item.json_data.type == "main_banner") {
                item.json_data.data = item.json_data.data.filter((i) => i.imgUrl);
            }
            });
        }
      } else {
        setTimeout(() => {
          router.replace({ path: `/store/goods/vid-`+vid });
        }, 2000);
      }
    } else if (res.state == 257) {
      shutDown.value = true;
    }
};



onMounted(()=>{
  setTimeout(() => {

    sldStatEvent({ behaviorType: 'spv', storeId: vid ,pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl });


      sldStatEvent({ behaviorType: 'pv', storeId: vid,pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl  });
    }, 3000)
})
</script>
<style lang="scss" scoped>
@import "@/assets/style/decorate.scss";
@import "@/assets/style/theme.scss";

.index {
  background: #f8f8f8;
  padding-bottom: 10px;
}

.skeleton_banner {
  width: 100%;
  height: 470px;
  background: $colorSkeleton;
  margin-bottom: 10px;
}

.skeleton {
  &.adv_04_wrap .floor_title h2 span {
    background: $colorSkeleton;
    display: inline-block;
    width: 200px;
  }

  &.adv_04_wrap .floor_goods .item .wrap .title {
    background: $colorSkeleton;
    width: 100%;

    a {
      color: transparent;
    }
  }

  &.adv_04_wrap .floor_goods .item .wrap .price {
    width: 100%;
    height: 25px;
  }

  &.adv_04_wrap .floor_goods .item .wrap .price span {
    display: inline-block;
    width: 70px;
    height: 100%;
    background: $colorSkeleton;
  }
}

.honors_wrap{
  min-height: inherit !important;
  font-weight: bold;
  padding-top: 10px;
  font{
    top: -5px!important;
  }

  .floor_title {
    // margin-bottom: 0 !important;
    width: 1440px;
    margin: 0 auto !important;
  }

  span {
    font-weight: bold !important;
  }
}
</style>